import React, {Component} from 'react';
import axios from "axios";
import './filmpage.css'

//创建Context对象
//供应商给客户提供服务
const GlobalContext = React.createContext()

class App extends Component {
    constructor() {
        super();
        this.state = {
            list: [],
            info: '',
        }

        axios.get(`test.json`).then(res => {
            console.log(res.data.data.films)
            this.setState({
                list: res.data.data.films
            })
        })
    }

    render() {
        return (
            <GlobalContext.Provider className="Provider" value={{//可写:方法,对象
                call: '打电话',
                sms: '短信服务',
                info:this.state.info,
                changeInfo:(val)=>{
                    this.setState({
                        info:val
                    })
                }
            }}>
                <div>
                    {
                        this.state.list.map(item =>
                            <Filmitem key={item.filmId} {...item}></Filmitem>
                        )
                    }

                    <FilmDetail info={this.state.info}></FilmDetail>
                </div>
            </GlobalContext.Provider>
        );
    }
}

//受控组件
class Filmitem extends Component {
    render() {
        let {name, poster, grade, synopsis} = this.props
        return (
            <GlobalContext.Consumer className="Consumer">
                {
                    (value) => {
                        return (
                            <div className='filmitem' onClick={() => {
                                value.changeInfo(synopsis)
                            }}>
                                <img src={poster} alt={name}/>
                                <h4>{name}</h4>
                                <div>观众评分：{grade}</div>
                            </div>
                        )
                    }
                }
            </GlobalContext.Consumer>
        )
    }
}

class FilmDetail extends Component {
    render() {
        return (
            <GlobalContext.Consumer className="Consumer">
                {
                    (value) => {
                        console.log(value)
                        return (
                            <div className='filmiDetail'>
                                {value.info}
                            </div>
                        )
                    }
                }
            </GlobalContext.Consumer>
        )
    }
}


export default App;



